Context

After upgrading Create React App to v4, the exported SASS variables did not work anymore in my project. This was a known issue for CRA@v4.

Cause of the issue

In CRA@v4, css-loader was upgraded from v3 to v4. In css-loader v4 there was a bug that did not handle ICSS (the syntax within CSS modules used to :import and :export) imports properly. This has been resolved by adding the compileType property in v4.2.0.

In the README of css-loader, there is a whole section about how to configure your setup to support ICSS properly when used together with CSS modules (see here).

What has been done?

• Pass a compileType to all style rules in Webpack config of CRA. Use icss for non-modules and module for all modules

How to test?

I tested this in my own project, but in the Create-React-App project, I verified this works by doing the following:

• Ran the project using yarn start
• Verify the interface of the App template is shown properly
• Now, within packages/cra-template/template/src, rename App.css to App.module.css, in the class-names replace all kebab-cased classnames to camelcase (for testing purposes)
• In App.js, change the import to import Styles from './App.module.css'; and replace all classnames with Styles.App-like variant
• Verify the interface of the App template is shown properly
• Add a file foo.css with the following content: :export { black: #000000; }
• In App.js, add the following import: import vars from './foo.css'
• In App.js, change the <p> on line 10 to <p style={{ color: vars.black }}>
• Verify the interface of the App template displays the text in black. This confirms the :export syntax is working properly.
• Now, in your terminal, stop the running project. Then run (cd packages/cra-template && yarn add node-sass) and run yarn start again
• Rename all .css files within packages/cra-template/template/src to .scss
• Verify the interface of the App template displays the text in black. This confirms the :export syntax is working properly, even in SCSS 🎉